<template>
    <el-row class="tac">
        <el-col :span="24">
            <el-menu unique-opened router>
                <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
                    <el-submenu :index="index+''" v-if="!item.leaf">
                        <template slot="title"><i :class="item.iconCls"></i>{{item.name}}++{{item.leaf}}</template>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}+++{{child.path}}</el-menu-item>
						</el-submenu>


						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
                    
                </template>
            </el-menu>
        </el-col>
    </el-row>
</template>
<script>
export default {
    data() {
        return {
            SYSLOGO: '',
            nodes: this.$router.options.routes,
        }
    },
    created() {
        //var sb=  window.sessionStorage.getItem("menus")
        // console.log(process.env.sysName)
        // this.SYSLOGO = process.env.SYSLOGO;
        //这里没有直接使用this.$router.options.routes，是因为addRoute的路由规则，在这里this.$router.options.routes获取不到
        //有兴趣的可以看一下源码，是为什么获取不到，但是却又有规则了
        //另外在开发的时候，可能由于是热部署，也会不断重复的给nodes添加元素，造成导航条有重复的，简单解决，可以设置一个开关
        let isLoadNodes = JSON.parse(sessionStorage.getItem("menus"));
        this.nodes.push(...isLoadNodes);
        console.log(this.$router.options)

    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>